<template>
  <u-popup v-model="show" mode="bottom" height="auto" @close="cancel">
    <view class="my_keyboard">
      <view class="box">
        <view class="tit">
          <text v-if="min > 0">当前起订量：{{ min }}</text>
          <text v-if="limit > 0">当前库存：{{ max }}</text>
        </view>
        <view class="input_num flex flex_row_center flex_col_center">
          <text> 数量：</text>
          <input type="text" disabled="" v-model="value" class="get_num" />
        </view>
      </view>

      <view class="operate">
        <view class="option">
          <text @click="cancel">取消</text>
          <text @click="confirm">完成</text>
        </view>
        <view class="all_num">
          <view
            class="sign_num"
            v-for="(item, index) in number"
            :key="index"
            @click="getVal(item)"
          >
            {{ item }}
          </view>
          <view
            class="sign_num custom-icon custom-icon-deleteicon"
            @click="getVal('x')"
          >
            x
          </view>
        </view>
      </view>
      <u-toast ref="uToast" />
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      index: null,
      show: false,
      value: "",
      number: [1, 2, 3, 4, 5, 6, 7, 8, 9, ".", 0],
      min: null, //起订量
      max: null, //库存
      limit: null, //是否限购
    };
  },
  methods: {
    cancel() {
      this.$emit('close')
      this.show = false;
      this.value = "";
    },
    open(type, index, min, max, limit) {
      this.index = index;
      this.min = Number(min);
      this.limit = Number(limit);
      this.max = Number(max);
      if (type == 1) {
        //标品，不要小数点
        this.number = [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0];
      } else {
        this.number = [1, 2, 3, 4, 5, 6, 7, 8, 9, ".", 0];
      }
      this.show = true;
    },
    confirm() {
      if (this.value < this.min) {
        uni.showToast({
          title: "不能小于起订量",
          duration: 2000,
          icon: "none",
        });
      } else if (this.limit > 0 && this.value > this.max) {
        uni.showToast({
          title: "不能大于库存",
          duration: 2000,
          icon: "none",
        });
      } else {
        this.$emit("confirm", {
          value: this.value,
          index: this.index,
          inventory: this.max,
        });
        this.cancel();
      }
    },
    getVal(data) {
      let str = String(data);
      if (data == "x") {
        this.value = this.value.substring(0, this.value.length - 1);
      } else {
        if (this.value.indexOf(".") >= 0 && data == ".") {
          this.$refs.uToast.show({
            title: "格式不正确",
            type: "error",
            icon: false,
          });
          return;
        }
        this.value += str;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.my_keyboard {
  .box {
    background: $white;
    padding: 30rpx;
    margin: 0 100rpx;
    text-align: center;
    border-radius: 5px;

    .tit {
      margin-bottom: 30rpx;

      > text {
        margin-left: 30rpx;
      }
    }

    .input_num {
      // width: 300rpx;
      // height: 100rpx;
      text-align: center;
      text {
        min-width: 60rpx;
      }
      .get_num {
        // width: 150rpx;
        border-bottom: 1px solid black;
      }
    }
  }

  .operate {
    margin-top: 100rpx;
  }

  .operate .option {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: 80rpx;
    background: #f4f4f4;
    align-items: center;
    @extend .padding;
  }

  .all_num {
    display: grid;
    padding: 14rpx 20rpx 60rpx;
    background: rgba(220, 221, 221, 0.8);
    grid-template-columns: repeat(3, 31.3%);
    grid-template-rows: repeat(4, 100rpx);
    grid-gap: 15rpx 3%;
    text-align: center;

    .sign_num {
      line-height: 100rpx;
      background: white;
      border-radius: 5px;
      box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
      font-weight: bold;
    }
  }
}
</style>
